<template>
	<view>
		<!-- <button @click="open">打开弹窗</button>
		<view>选择的周数:{{ dateObj.showTime }}</view>
		<view>选择的时间是:{{ dateObj.startTime }}</view>
		<view>选择的时间是:{{ dateObj.endTime }}</view> -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="my_popup">
				<view class="my_selectDeta flex-between">
					<text class="fs32">{{title}}</text>
					<m-icon type="icon-guanbi1" @click="iconClose"></m-icon>
				</view>
				<!-- <view class="tabbar">
					<view :class="current ? 'bg' : ''" @click="current = true">按月选择</view>
					<view :class="!current ? 'bg' : ''" @click="current = false">按周选择</view>
				</view> -->
				<picker-view :indicator-style="indicatorStyle" :value="selectValue" class="picker-view"
					@change="bindChange">
					<picker-view-column>
						<view v-for="(item, index) in years" :key="index" class="item">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column v-show="current">
						<view v-for="(item, index) in months" :key="index" class="item">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column v-show="!current">
						<view v-for="(item, index) in weeks" :key="index" class="item">
							{{ `第${index + 1}周(` + item + ')' }}
						</view>
					</picker-view-column>
				</picker-view>
				<button class="my_button" type="primary" @click="close">
					确定
				</button>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import dayjs from '@/utils/dayjs.js';
	export default {
		name: 'm-picker',
		props: {
			title: {
				type: String,
				default: '请选择日期'
			},
		},
		data() {
			return {
				dateObj: {},
				current: false, // 是否月选择
				indicatorStyle: 'height: 100rpx;',
				myDate: new Date(),
				year: (new Date()).getFullYear(),
				month: (new Date()).getMonth() + 1,
				selectValue: [1, (new Date()).getMonth(), 1],
				years: [],
				months: [],
				week: '',
				showWeek: '第1周',
				payload: {},
			}
		},
		computed: {
			weeks() {
				const ONE_DAY = 24 * 3600 * 1000;
				let firstDay =
					new Date(this.year + '/01/01').getDay() == 0 ?
					7 :
					new Date(this.year + '/01/01').getDay();
				let weeklist = [];
				let firstweekday = '';
				let endweekday = new Date(this.year + '/12/28').getTime();
				if (firstDay > 4) {
					firstweekday =
						new Date(this.year + '/01/01').getTime() +
						(8 - firstDay) * ONE_DAY;
				} else if (firstDay <= 4) {
					firstweekday =
						new Date(this.year + '/01/01').getTime() -
						(firstDay - 1) * ONE_DAY;
				}
				for (let i = 0; i < 54; i++) {
					let numWeek = i * 7 * ONE_DAY;
					let firstday = firstweekday + numWeek;
					let endday = firstday + 6 * ONE_DAY;
					if (firstday <= endweekday) {
						weeklist.push(
							`${dayjs(firstday).format('MM/DD')}-${dayjs(endday).format(
			 				'MM/DD'
			 			)}`
						);
					}
				}
				return weeklist;
			}
		},
		watch: {
			year(val) {
				const index = this.years.findIndex((item) => item == val);
				this.selectValue = [index, this.month - 1, 0];
			}
		},
		mounted() {
			
			this.initPicker()
		},
		methods: {
			curWeek() {
				const today = new Date();
				let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
				const dayOfWeek = firstDayOfYear.getDay();
				let spendDay = 1;
				if (dayOfWeek != 0) {
					spendDay = 7 - dayOfWeek + 1;
				}
				firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
				const d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
				return Math.ceil(d / 7);
			},
			initPicker() {
				let a=this.curWeek()
				console.log('a---',a)
				this.selectValue=[1,(new Date()).getMonth(), a-1]
				this.week = this.weeks[a-1];
				// this.showTime=`第${a}周`;
				// this.week=this.weeks[0]
				for (let i = this.myDate.getFullYear() - 1; i <= this.myDate.getFullYear(); i++) {
					this.years.push(i);
				}
				for (let i = 1; i <= 12; i++) {
					this.months.push(i);
				}
			},
			bindChange(e) {
				console.log('@change[e]', e)
				const val = e.detail.value;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.week = this.weeks[val[2]];
				this.showWeek = '第' + (val[2] + 1) + '周';
				this.selectValue=[1,(new Date()).getMonth(), val[2]]
			},
			open() {
				this.$refs.popup.open('bottom');
			},
			close() {
				if (this.current) {
					// 月
					this.month = this.month > 10 ? this.month : '0' + this.month;
					this.payload = {
						startTime: this.year + '-' + this.month + '-' + '01',
						endTime: this.year + '-' + this.month + '-' + '31',
						showTime: this.year + '-' + this.month
					};
				} else {
					// 周
					const [firstWeek, lastWeek] = this.week
						.split('-')
						.map((item) => item.replace('/', '-'));
					this.payload = {
						startTime: this.year + '-' + firstWeek,
						endTime: this.year + '-' + lastWeek,
						showTime: this.year + '-' + this.showWeek
					};
				}
				this.dateObj = this.payload;
				this.$refs.popup.close();
				this.$emit('change', this.dateObj)
			},
			iconClose() {
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 日期选择
	.my_popup {
		height: 900rpx;
		border-radius: 8rpx 8rpx 0 0;
		position: relative;
		font-size: 32rpx;
		font-weight: 500;
		color: #1b1d21;

		.my_selectDeta {
			padding: 0rpx 30rpx;
			height: 104rpx;
			line-height: 104rpx;
			position: relative;

			.my_selectDeta_icon {
				position: absolute;
				right: 24rpx;
				top: 0;
			}
		}

		.my_button {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			font-size: 28rpx !important;
			margin: 24rpx 36rpx;
		}

		.picker-view {
			width: 750rpx;
			height: 600rpx;
			margin-top: 20rpx;

			.item {
				line-height: 100rpx;
				text-align: center;
			}
		}

		.tabbar {
			box-sizing: border-box;
			width: 328rpx;
			padding: 8rpx;
			height: 72rpx;
			margin: 0 auto;
			display: flex;
			border-radius: 8rpx;
			background-color: #f4f5f7;
			justify-content: space-around;

			view {
				padding: 5rpx 12rpx;
				font-size: 28rpx;
				color: #1b1d21;
				background: #f4f5f7;
			}

			.bg {
				background: rgb(1, 1, 202);
				border-radius: 8rpx;
				color: white;
			}
		}
	}
</style>